"use client"

import { useEffect, useRef } from 'react'
import Script from 'next/script'

export function SearchHeader() {
  const containerRef = useRef<HTMLDivElement>(null)
  const searchBoxRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // 确保jQuery已加载后再加载搜索头部脚本
    const loadSearchHeader = () => {
      if (typeof window !== 'undefined' && (window as any).jQuery) {
        const script = document.createElement('script')
        script.src = '/search-header.js'
        script.async = true
        document.head.appendChild(script)
      } else {
        setTimeout(loadSearchHeader, 100)
      }
    }
    
    loadSearchHeader()
  }, [])

  return (
    <>
      {/* 引入jQuery */}
      <Script 
        src="https://code.jquery.com/jquery-3.6.0.min.js" 
        strategy="beforeInteractive"
      />
      
      {/* 引入搜索头部样式 */}
      <link rel="stylesheet" href="/search-header.css" />
      
      {/* 搜索头部组件容器 */}
      <div ref={containerRef} className="search-header-container">
        {/* 默认搜索引擎隐藏链接 */}
        <a style={{height: '0px', width: '0px'}} id="hidden" href="https://www.baidu.com/s?wd="></a>
        
        {/* 翻转的logo */}
        <div className="flip-container-OK frontimgOK">
          <div className="flipper-OK">
            <div className="front-OK">
              <div className="front-logo-OK bbb-OK"></div>
            </div>
            <div className="back-OK">
              <p className="bbb-OK">
              <a style={{color:'#1E9FFF', textDecoration: 'none'}} href="https://www.hello123.com" target="_blank">
                  hello123工具导航
                </a>
                &nbsp;or&nbsp;
                <span style={{color:'#009688', textDecoration: 'none'}}>
                  Not
                </span>
                
                
              </p>
            </div>
          </div>
        </div>
        
        {/* 搜索框 */}
        <div className="sousuokuang">
          <div ref={searchBoxRef} className="search_box">
            <input 
              id="B1" 
              name="put" 
              maxLength={100} 
              onKeyPress={(e) => {
                if(e.charCode === 13) {
                  // 需要确保全局函数judge已加载
                  if (typeof window !== 'undefined' && (window as any).judge) {
                    (window as any).judge();
                  }
                  return false;
                }
              }}
              placeholder="Hello, 请输入..." 
              className="searchIpt"
            />
            <div className="flip-container frontimg">
              <div className="flipper">
                <div className="front">
                  <img src="/icon/baidu.png" className="bbb" title="点击切换" />
                </div>
                <div className="back">
                  <img src="/icon/google.png" className="bbb" title="点击切换" />
                </div>
              </div>
            </div>
          </div>
          
          {/* 自动完成下拉框 - 移到搜索框容器内部 */}
          <div className="abab"> 
            <div id="auto" style={{display: 'none'}}> 
            </div> 
          </div>
          
          {/* 快捷搜索按钮 */}
          <div className='popular'>
            <div className='top'>
              <a href="https://chat.deepseek.com" target="_blank" title="点击进入DeepSeek">
                <img id="deepseek" className="pop" src="https://res.hello123.com/so/icon/deepseek.png" alt="DeepSeek" /> 
              </a> 
            </div>
            <div className='top'>
              <img 
                id='baidu' 
                src="https://res.hello123.com/so/icon/baidu.png" 
                className="pop" 
                title="百度搜索" 
                onClick={(e) => {
                  if (typeof window !== 'undefined' && (window as any).search) {
                    (window as any).search(e.target);
                  }
                }}
                alt="百度" 
              />
            </div>
            <div className='top'>
              <img 
                id='taobao' 
                className="pop" 
                src="https://res.hello123.com/so/icon/taobao.png" 
                title="淘宝搜索" 
                onClick={(e) => {
                  if (typeof window !== 'undefined' && (window as any).search) {
                    (window as any).search(e.target);
                  }
                }}
                alt="淘宝" 
              />	
            </div>
            <div className='top'>
              <img 
                id='zhihu' 
                className="pop" 
                src="https://res.hello123.com/so/icon/zhihu.png" 
                title="知乎搜索" 
                onClick={(e) => {
                  if (typeof window !== 'undefined' && (window as any).search) {
                    (window as any).search(e.target);
                  }
                }}
                alt="知乎" 
              />	
            </div>
            <div className='top'>
              <img 
                id='sinaweibo' 
                className="pop" 
                src="https://res.hello123.com/so/icon/sinaweibo.png" 
                title="微博搜索" 
                onClick={(e) => {
                  if (typeof window !== 'undefined' && (window as any).search) {
                    (window as any).search(e.target);
                  }
                }}
                alt="微博" 
              />
            </div>
            <div className='top'>
              <img 
                id='bilibili' 
                src="https://res.hello123.com/so/icon/bilibili.png" 
                className="pop" 
                title="B站搜索" 
                onClick={(e) => {
                  if (typeof window !== 'undefined' && (window as any).search) {
                    (window as any).search(e.target);
                  }
                }}
                alt="哔哩哔哩" 
              />
            </div>	
          </div>
        </div>
      </div>
    </>
  )
} 